|
基于 vue-cli v5 配置
单页面打包，在配置入口文件的时候按照下面打包会报错
pages: {
index: {
// page 的入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
}
复制代码
执行打包命令会报错，index.html 文件重复，vue-cli 集成了 webpack 的配置，开箱即用。默认的entry文件就是src/main.js，所以干脆删掉了 pages 配置项。在项目是多入口的情况下，可以使用 pages 配置多入口。
完整打包配置如下
const {defineConfig} = require('@vue/cli-service')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
const isProduction = process.env.NODE_ENV === 'production'
function resolve(dir) {
return path.join(__dirname, dir)
}
const cdn = {
// 忽略打包的第三方库
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT '
},
// 通过cdn方式使用
js: [
'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js',
'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
'https://unpkg.com/element-ui/lib/index.js'
],
css: [
'https://unpkg.com/[email protected]/lib/theme-chalk/index.css'
]
}
module.exports = defineConfig({
// 具体使用情况还需要看项目的配置
publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // baseUrl 弃用
outputDir: 'dist',
assetsDir: 'static',
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
lintOnSave: !isProduction,
productionSourceMap: !isProduction, // 生产环境下不起用source-map
indexPath: 'index.html',
// 前端配置代理
devServer: {
port: 9527, // 默认8080
proxy: {
'/api': {
target: '', // 要代理的地址
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 是否允许跨域
pathRewrite: {
'^/api': ''
}
}
}
},
/**
* 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
* 配置文件打包方式
* 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
* @param config | Object
*/
configureWebpack: config => {
// 忽略第三方资源
config.externals = cdn.externals
// 打包配置
if (isProduction) {
// 生产环境下打包文件
let customPulgins = []
config.mode = 'production'
config.performance = {
// 性能提示
hints: false,
// 入口文件大小配置
maxEntrypointSize: 400000,
// 静态资源文件大小配置
maxAssetSize: 100000
}
customPulgins.push(
// 代码压缩
new CompressionWebpackPlugin({
algorithm: "gzip",
test: /\.js$|\.html$|\.css$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
minRatio: 0.8 // 压缩比
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
},
output: {
// 去掉注释内容
comments: true
}
},
sourceMap: false,
parallel: true
})
)
config.plugins = [...config.plugins, ...customPulgins]
} else {
// 开发环境配置
}
},
/**
* 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
* 添加编译的 loader
* @param config
*/
chainWebpack: config => {
// 修改默认的入口文件路径
// config.entry.app = 'xxxxxxx'
if (isProduction) {
// 生产环境注入cdn资源 需要在pubic/index.html配置
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
}
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 配置别名
config.resolve.alias
.set('@', resolve('src'))
},
// css配置项
css: {
// 如果你想去掉文件名中的 .module，可以设置 vue.config.js 中的 css.requireModuleExtension 为 false
loaderOptions: {
// 定义全局样式无需引入即可使用
sass: {
prependData: `
@import "@/assets/css/variable.scss";
@import "@/assets/css/common.scss";
@import "@/assets/css/mixin.scss";
`,
modules: {
auto: () => false
}
}
}
}
})
复制代码
有更好的配置方案，欢迎留言补充啊！栓q！
|